<template>
  <div>
    <table-search :searchOptions="searchOptions" :searchSource="searchSource"
     @searchHandle="searchHandle" @resetHandle="resetHandle">
    </table-search>
    <table-content ref="loginTable" :tableOptions="tableOptions" :tableSource="tableSource" @selectionChangeHandle="selectionChangeHandle"
     @sortChangeHandle="sortChangeHandle" @pageHandle="pageHandle">
    </table-content>
    <login-info ref="loginInfoDialog" :size="this.size" @flush="flush"></login-info>
  </div>
</template>

<script>
import TableSearch from '@/components/table/table-search'
import TableContent from '@/components/table/table-content'
import LoginInfo from '@/views/modules/log/login-info'
import { getLoginListApi } from '@/api/log'
export default {
  components: { TableSearch, TableContent, LoginInfo },
  props: {
    size: {
      type: String,
      default: 'mini'
    }
  },
  data() {
    return {
      searchOptions: {
        size: this.size,
        show: true,
        init: true
      },
      tableOptions: {
        size: this.size,
        highlightCurrentRow: true, // 是否要高亮当前行
        fit: true, // 列的宽度是否自撑开
        serialNumber: true, // 序号框
        pagination: true // 分页
      },
      searchSource: {
        inModel: {
          minCreateTime: '',
          maxCreateTime: '',
          userName: '',
          ip: ''
        },
        operations: [
          {
            name: '用户名',
            key: 'userName',
            type: 'text',
            width: '9rem',
            length: 15
          },
          {
            name: 'IP',
            key: 'ip',
            type: 'text',
            width: '9rem',
            length: 15
          },
          {
            name: '创建时间',
            key: 'createTime',
            type: 'daterange',
            width: '18rem'
          },
          {
            type: 'place',
            width: '28rem'
          }
        ]
      },
      tableSource: {
        headers: [
          {
            prop: 'createTime',
            label: '登录时间',
            minWidth: '60rem',
            sortable: 'custom',
            formatData: (row, column, columnValue) => {
              return this.$time.formatDate(columnValue, 'yyyy-MM-dd HH:mm:ss')
            }
          },
          {
            prop: 'userName',
            label: '登录账户',
            route: {
              type: 0,
              field: 'id',
              method: (data, row) => {
                this.viewHandle(data, row)
              }
            }
          },
          { prop: 'ip', label: 'IP' },
          { prop: 'os', label: '操作系统' },
          { prop: 'browser', label: '浏览器' },
          {
            prop: 'sourceTypeDesc',
            label: '登录来源',
            minWidth: '40rem'
          },
          {
            prop: 'businessStatusDesc',
            label: '业务状态',
            minWidth: '40rem',
            tag: {
              prop: 'businessStatus',
              filter: (val) => {
                return val === 10000 ? 'success' : 'danger'
              }
            }
          }
        ],
        data: []
      },
      query: {
        sortField: '',
        sortRule: 1,
        page: 1,
        pageSize: 15,
        minCreateTime: '',
        maxCreateTime: '',
        userName: '',
        ip: ''
      },
      selections: []
    }
  },
  created() {
    this.list(this.query)
  },
  methods: {
    list(data) {
      getLoginListApi(data).then(res => {
        this.tableSource.data = res.data
      })
    },
    flush() {
      this.list(this.query)
    },
    searchHandle(obj) {
      this.query.page = obj.page
      Object.assign(this.query, obj.backData)
      this.list(this.query)
    },
    resetHandle() {
      Object.assign(this.$data.query, this.$options.data().query)
      this.$refs.loginTable.init()
      this.list(this.query)
    },
    selectionChangeHandle(obj) {
      this.selections = obj.backData
    },
    sortChangeHandle(obj) {
      let column = obj.backData
      if (column.order) {
        this.query.sortField = column.prop
        // 倒序
        if (column.order === 'descending') {
          this.query.sortRule = 1
        } else {
          this.query.sortRule = 0
        }
      } else {
        // 不排序
        this.query.sortField = ''
        this.query.sortRule = 0
      }
      this.list(this.query)
    },
    pageHandle(obj) {
      this.query.page = obj.backData.page
      this.query.pageSize = obj.backData.pageSize
      this.list(this.query)
    },
    // 查看
    viewHandle (id, row = {}) {
      this.$refs.loginInfoDialog.dialogOptions.show = true
      this.$refs.loginInfoDialog.init(id)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
